<template>
  <el-tag
    :type="tagType"
    :effect="effect"
    :class="['meeting-status-tag', `status-${status.toLowerCase()}`]"
  >
    {{ statusText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { MeetingStatus } from '@/api/meeting'

const props = defineProps<{
  status: MeetingStatus
  effect?: 'light' | 'dark' | 'plain'
}>()

const statusText = computed(() => {
  const map: Record<MeetingStatus, string> = {
    [MeetingStatus.DRAFT]: '草稿',
    [MeetingStatus.NOT_STARTED]: '未开始',
    [MeetingStatus.IN_PROGRESS]: '进行中',
    [MeetingStatus.FINISHED]: '已结束',
    [MeetingStatus.CANCELLED]: '已取消'
  }
  return map[props.status]
})

const tagType = computed(() => {
  const map: Record<MeetingStatus, '' | 'success' | 'warning' | 'info' | 'danger'> = {
    [MeetingStatus.DRAFT]: '',
    [MeetingStatus.NOT_STARTED]: 'info',
    [MeetingStatus.IN_PROGRESS]: 'success',
    [MeetingStatus.FINISHED]: '',
    [MeetingStatus.CANCELLED]: 'danger'
  }
  return map[props.status]
})
</script>

<style scoped>
.meeting-status-tag {
  min-width: 72px;
  text-align: center;
}
</style> 